<template>
  <div>
    <h2>理财列表</h2>
    理财名称<input type="text" v-model="state.Fname">
    利息值<select v-model="state.FL_id">
            <option value="">请选择</option>
            <option v-for="item in list1" :value="item.FL_id">每年{{item.FL_num}}%</option>
          </select>
          <input type="button" value="查询" @click="cha">
    <table class="table" border=1>
      <tr>
        <td>理财项目编号</td>
        <td>理财项目名称</td>
        <td>年收益</td>
        <td>利息</td>
        <td>盈利</td>
        <td>最低金额</td>
        <td>理财人次</td>
        <td>风险等级</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in list">
        <td>{{item.Fid}}</td>
        <td>{{item.Fname}}</td>
        <td>{{item.Year_sum}}</td>
        <td>{{item.FL_num}}%</td>
        <td>{{(item.Year_sum*(item.F_num/100)).toFixed(2)}}</td>
        <td>{{item.Min_money}}</td>
        <td>{{item.F_num}}</td>
        <td>{{item.LvName}}</td>
        <td>操作</td>
      </tr>
    </table>
    共有<span>{{count  }}</span>条数据,
    每页显示<span>{{ state.pagesize }}</span>条数据,
    当前<span>{{state.pageindex  }}</span>/<span>{{pcount}}</span>页
    <input type="button" @click="go('first')" value="首页">
    <input type="button" @click="go('on')" value="上一页">
    <input type="button" @click="go('next')" value="下一页">
    <input type="button" @click="go('end')" value="尾页">
    <select v-model="state.pagesize" @change="Jump" >
      <option v-for="item in arr" :value="item">每页{{ item }}条</option>
    </select>
    <input type="text" size="1" v-model="state.pageindex">
    <input type="button" value="go" @click="qu">
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {reactive,toRefs,onMounted} from 'vue'
let data=reactive({
  state:{
    Fname:"",
    FL_id:"",
    pagesize:2,
    pageindex:1
  },
  list:{},
  list1:{},
  count:"",
  pcount:"",
  arr:[2,4,6,8]
})
let {state,list,count,pcount,arr,list1}=toRefs(data)
onMounted(()=>{
  getlist()
  getlist1();
})
function getlist()
{
  axios({
    url:"http://localhost:51322/api/Fin/GetFinLixiList",
    method:"get",
  })
  .then(res=>{
    console.log(res);
    list1.value=res.data.data
  })
  .catch(err=>{
    console.log(err);
  })
}
function getlist1()
{
  axios({
    url:"http://localhost:51322/api/Fin/GetFinInfoList",
    method:"get",
    params:state.value
  })
  .then(res=>{
    console.log(res);
    list.value=res.data.data,
    count.value=res.data.Count,
    pcount.value=res.data.Pcount
  })
  .catch(err=>{
    console.log(err);
  })
}
function go(sty:any)
{
  switch (sty) {
    case 'first':
      if(state.value.pageindex==1)
      {
        alert("已经是首页");
        return;
      }
      state.value.pageindex=1
      break;
      case 'on':
      if(state.value.pageindex==1)
      {
        alert("已经是首页");
        return;
      }
      state.value.pageindex--;
      break;
      case 'next':
      if(state.value.pageindex==pcount.value)
      {
        alert("已经是尾页");
        return;
      }
      state.value.pageindex++;
      break;
      case 'end':
      if(state.value.pageindex==pcount.value)
      {
        alert("已经是首页");
        return;
      }
      state.value.pageindex=pcount.value
      break;
  }
  getlist1();
}
function Jump()
{
  getlist1();
}
function qu()
{
  if(state.value.pageindex<1)
  {
    alert("当前页索引不能小于1");
    state.value.pageindex=1;
    return;
  }
  if(isNaN(state.value.pageindex)==true)
  {
    alert("当前页索引只能为数字");
    state.value.pageindex=1;
    return;
  }
  if(state.value.pageindex>Number(pcount.value))
  {
    alert("当前页索引不能大于总页数");
    state.value.pageindex=1;
    return;
  }
  getlist1();
  
}
function cha()
{
  getlist1();
}
</script>

<style scoped>

</style>